<template>
  <view class="image-list">
    <image lazy-load @click="previewImage(imageList, index)" v-for="(image,index) in imageList.slice(0, props.maxCount)"
           :key="index" mode="aspectFill"
           class="image-box" :style="{ height: props.height, width: props.width, borderRadius, border }" :src="getImage(image)"></image>
    <view v-if="props.showExtraImages && imageList.length > props.maxCount">
      <view @click="previewImage(imageList, imageList.length - props.maxCount)" :style="{ height, width }"
            class="image-mask-box">
        <text>+{{ imageList.length - props.maxCount }}</text>
      </view>
      <image @click="previewImage(imageList, imageList.length - props.maxCount)" :style="{ height, width, borderRadius, border }"
             mode="aspectFill" class="image-box" :src="imageList?.[imageList.length - props.maxCount]">
      </image>
    </view>
  </view>
</template>

<script setup>
import {onBeforeMount, ref} from 'vue';
import {listByIds} from "@/api/system/oss";


const props = defineProps({
  previewEnabled: {
    type: Boolean,
    default: false
  },
  showExtraImages: {
    type: Boolean,
    default: true
  },
  images: {
    type: [Array, String],
    default: () => ([])
  },
  maxCount: {
    type: Number,
    default: 1
  },
  borderRadius: {
    type: String,
    default: ''
  },
  border: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  }
})

const defaultImage = ref('/static/images/no-image.png')

function getImage(image) {
  return image || defaultImage.value
}

function previewImage(urls, current) {
  if (!props.previewEnabled) {
    return;
  }
  uni.previewImage({
    current,
    indicator: "number",
    loop: true,
    urls
  })
}

async function getImages(images) {
  if (images) {
    if (!images.includes('http')) {
      const res = await listByIds(images)
      return res.data ? res.data.map(item => item.url) : [];
    }
    return images.split(',')
  }
  return [];
}

async function getImageList(images) {
  if (Object.prototype.toString.call(images) === '[object String]' && images) {
    imageList.value = await getImages(images);
  } else if (Object.prototype.toString.call(images) === '[object Array]') {
    imageList.value = [...images];
  } else {
    imageList.value = ['/static/images/no-image.png']
  }
}

const imageList = ref([]);
onBeforeMount(() => {
  getImageList(props.images);
})

defineExpose({
  getImageList
})
</script>

<style scoped lang="scss">
.image-box,
.image-mask-box {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 8rpx;
}

.image-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.image-mask-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
</style>
